<template>
	<view class="tab-bar">
		<view class="tabbar-container">
			<view class="tabbar-item" v-for="(item, index) in tabBarList" :class="[item.isCenter ? 'center' : '']" @click="handleChange(item)">
				<view class="item-top">
					<image :src="currentPath == item.path ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-bottom" :class="[currentPath == item.path ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { tabBarList } from './config/data.js';
/**
 * 参数名               类型              描述
 * currentPath        String          当前页面路径
 */

const props = defineProps({
	currentPath: {
		type: String,
		default: () => 'pages/index/index'
	}
});

const emit = defineEmits(['scroll-height']);

const currentPath = ref(`${props.currentPath}`);

const scrollHeight = ref(0);

const handleChange = (item) => {
	uni.switchTab({ url: item.path });
};

onLoad(() => {
	//隐藏原生tabbar
	uni.hideTabBar();
	//以下代码为了列表触底加载使用，按照个人需求(可删除/可自定义)
	uni.getSystemInfo({
		success: (res) => {
			let info = uni.createSelectorQuery().select('.tab-bar');
			info.boundingClientRect((data) => {
				scrollHeight.value = res.screenHeight - data.height - res.statusBarHeight - 100;
				emit('scroll-height', scrollHeight.value);
			}).exec();
		}
	});
});
</script>

<style lang="scss" scoped>
$uni-bg-color: #bca404;
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
		z-index: 999;
}

.tabbar-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	color: #999999;
	background-color: #ffffff;
	box-shadow: 1px 1px 3px 1px #ccc;
	.tabbar-item {
		height: 100rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		margin: 25rpx 0;
		.item-top {
			width: 70rpx;
			height: 70rpx;
			padding: 10rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-bottom {
			font-size: 24rpx;
			width: 100%;
		}
	}
	.item-active {
		color: $uni-bg-color;
	}
	.center {
		display: block;
		position: relative;
		.item-top {
			flex-shrink: 0;
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: -40rpx;
			left: calc(50% - 50rpx);
			border-radius: 50%;
			box-shadow: 0 0 5px #999;
			background-color: #ffffff;
		}
		.item-bottom {
			position: absolute;
			bottom: 5rpx;
		}
	}
}
</style>
